import React, { Component } from 'react';
import BorderBox from './BorderBox';
import './style/drawBox.css';
import $ from  'jquery';

class DrawBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      boxPlace: {
        top: 0,
        left: 0
      },
      svgPlace: [],
      svgAttr: {},
      activitySvgId: '',
      borderAttr: {},
      borderIsShow: false,
      movePoint: false,
      pointDirection: null,
      controlConut: false,
      pointObj: {}
    };
  }

  componentWillMount() {
    this.bodyMouseup();
  }

  componentDidMount() {
    const { boxPlace } = this.state;
    const data = Object.assign({}, boxPlace, {
      top: $('.drawBox').offset().top,
      left: $('.drawBox').offset().left,
      height: $('.drawBox').height(),
      width: $('.drawBox').width(),
    });
    this.setState({
      boxPlace: data
    });   
  }

  bodyMouseup = () => {
    $('#body').mouseup((e) => {
      e.preventDefault();
      const { clientX, clientY, readySvg } = this.props;
      this.setState({
        svgPlace: [clientX, clientY],
        svgAttr: readySvg
      }, () => {
        if (document.getElementById('moveIng')) {
          this.startDrawSvg();
        }
        $('#moveIng').remove();
      });
    });
  }

  startDrawSvg = () => {
    const { boxPlace, svgPlace, svgAttr } = this.state;
    // 超出界限判断
    let H = 0;
    if (svgPlace[1] < boxPlace.top) {
      H = 0;
    } else if (svgPlace[1] > boxPlace.top + boxPlace.height - svgAttr.height) {
      H = boxPlace.height - svgAttr.height;
    } else {
      H = svgPlace[1] - boxPlace.top
    }

    let W = 0;
    if (svgPlace[0] < boxPlace.left) {
      W = 0;
    } else if (svgPlace[0] > boxPlace.left + boxPlace.width - svgAttr.width) {
      W = boxPlace.width - svgAttr.width;
    } else {
      W = svgPlace[0] - boxPlace.left
    }

    const svg = `<g>
        <${svgAttr.type} id=${svgAttr.type + W} height=${svgAttr.height} xlink:Href=${svgAttr.xlinkHref ? svgAttr.xlinkHref : null} width=${svgAttr.width} x=${W} y=${H} />
      </g>
    `
    document.getElementById('svg').innerHTML += svg;
    $("g").click((e)=> {
      this.changeSvg(e);
    });
    this.sendCode();
  }

  changeSvg = (e) => {
    e.stopPropagation();
    const id = '#' + e.target.id;
    this.setState({
      activitySvgId: id
    });
    let obj = {};
    obj.height = Number($(id).attr('height')) + 2;
    obj.width = Number($(id).attr('width')) + 2;
    obj.top = $(id).attr('y') - 1;
    obj.left = $(id).attr('x') - 1;

    this.setState({
      borderAttr: obj,
      borderIsShow: true
    });
    this.sendCode();
  }

  sendCode = () => {
    const codeHtml = $('.drawBox').eq(0).html();
    const { onSave } = this.props;
    onSave(codeHtml);
  }

  acceptMoveSvg = (item) => {
    const { activitySvgId, borderAttr } = this.state;
    $(activitySvgId).attr('x', item.newX);
    $(activitySvgId).attr('x', item.newY);
    $(activitySvgId).attr({
      x: String(item.NewX + 1),
      y: String(item.NewY + 1)
    });
    let obj = Object.assign({}, borderAttr, { top: item.NewY, left: item.NewX });
    this.setState({
      borderAttr: obj
    });
  }

  pointMouseMove = (e) => {
    const { movePoint, pointDirection, controlConut } = this.state;
    if (!movePoint) {
      return;
    }
    if (pointDirection === 1) {
      const obj = {};
      if (controlConut) {
        obj.oldClientX =  e.clientX;
        obj.oldClientY =  e.clientY
        this.setState({
          controlConut: false,
          pointObj: obj
        });
      }
      this.ZSJMouseMove(e);
      return;
    }
    if (pointDirection === 2) {
      const obj = {};
      if (controlConut) {
        obj.oldClientX =  e.clientX;
        obj.oldClientY =  e.clientY
        this.setState({
          controlConut: false,
          pointObj: obj
        });
      }
      this.YSJMouseMove(e);
      return;
    }
  }

  changePoint = (data) => {
    if (data === 1) {
      this.setState({
        movePoint: true
      });
    } else {
      this.setState({
        movePoint: false
      });
    }

  }

  changeDirection = (data) => {
    this.setState({
      pointDirection: data,
      controlConut: true
    });
  }

  // 左上角点的移动
  ZSJMouseMove = (e) => {
    const { borderAttr, activitySvgId, pointObj } = this.state;
    const { height, width } = borderAttr;
    if (e.clientX <= pointObj.oldClientX && e.clientY <= pointObj.oldClientY) {
      // 放大
      $(activitySvgId).attr('width', $(activitySvgId).attr('width') * 1 + 5 * 1);
      $(activitySvgId).attr('height', $(activitySvgId).attr('height') * 1 + 5 * 1);
      borderAttr.height = height * 1 + 5 * 1;
      borderAttr.width = width * 1 + 5 * 1;
    }
    if (e.clientX >= pointObj.oldClientX && e.clientY >= pointObj.oldClientY) {
      // 缩小
      $(activitySvgId).attr('width', $(activitySvgId).attr('width') * 1 - 5 * 1);
      $(activitySvgId).attr('height', $(activitySvgId).attr('height') * 1 - 5 * 1);
      borderAttr.height = height * 1 - 5 * 1;
      borderAttr.width = width * 1 - 5 * 1;
    }
    $(activitySvgId).attr('x', e.clientX - 270);
    $(activitySvgId).attr('y', e.clientY - 120);
    this.setState({
      borderAttr
    });
  }

  // 右上角点的移动
  YSJMouseMove = (e) => {
    const { borderAttr, activitySvgId, pointObj } = this.state;
    const { height, width } = borderAttr;
    if (e.clientX >= pointObj.oldClientX && e.clientY <= pointObj.oldClientY) {
      // 放大
      $(activitySvgId).attr('width', $(activitySvgId).attr('width') * 1 + 5 * 1);
      $(activitySvgId).attr('height', $(activitySvgId).attr('height') * 1 + 5 * 1);
      borderAttr.height = height * 1 + 5 * 1;
      borderAttr.width = width * 1 + 5 * 1;
    }
    if (e.clientX <= pointObj.oldClientX && e.clientY >= pointObj.oldClientY) {
      // 缩小
      $(activitySvgId).attr('width', $(activitySvgId).attr('width') * 1 - 5 * 1);
      $(activitySvgId).attr('height', $(activitySvgId).attr('height') * 1 - 5 * 1);
      borderAttr.height = height * 1 - 5 * 1;
      borderAttr.width = width * 1 - 5 * 1;
    }
    this.setState({
      borderAttr
    });
  }

  render() {
    const { type } = this.props;
    const { borderAttr, borderIsShow, boxPlace, activitySvgId } = this.state;
    return (
      <div
        className="drawBox"
        style={{ display: type && type === 'design' ? 'block' : 'none' }} 
        onClick={() => this.setState({ borderIsShow: false })}
        onMouseMove={(e) => this.pointMouseMove(e)}
      >
        <svg id="svg" />
        <BorderBox
          activitySvgId={activitySvgId}
          borderAttr={borderAttr}
          boxPlace={boxPlace}
          isShow={borderIsShow}
          sendMoveSvg={this.acceptMoveSvg}
          onMouseMove={(e) => this.pointMouseMove(e)}
          changePoint={this.changePoint}
          changeDirection={this.changeDirection}
        />
      </div>
    );
  }
}


export default DrawBox;

